<template>
    <div class="box-card">
        <div class="clearfix">
            <div class="header_top">
                <div class="task-header-border"></div>
            </div>
            <div class="task-header-border_span">
                <div>待办事项：</div>
                <el-tooltip class="item" effect="dark" content="点击关闭" placement="right">
                    <i class="el-icon-circle-close" style="margin-bottom: 0px;" @click="close"></i>
                </el-tooltip>
            </div>
            <div class="header_background">
                <span>您有{{taskTotal}}个与您有关的代办任务</span>
            </div>
            <!-- gotatlils" @click="gotails -->
            <div class="header_background ">
                <span>您有{{gettNum}}个事务提醒待处理</span>
            </div>
            <div class="header_background">
                <span>您有{{dealttotalNumber}}个待办事项待处理</span>
            </div>
            <div class="header_background" style="margin-bottom:10px">
                <span>您有{{agencytotal}}个抄送事项</span>
            </div>
        </div>
    </div>
</template>

<script>
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import { getWaitNum } from "@/api/alarmSet";
// import { mapState,mapGetters} from "vuex";
export default {
    // computed: {
    // 	...mapGetters([
    // 		'count'
    // 	])
    // },
    data() {
        return {
            gettNum: "",
            dealttotalNumber: "",
            agencytotal: 0,
            taskTotal: 0,
        };
    },
    props: ["dealttotal"],
    watch: {
        dealttotal(newval, oldval) {
            this.dealttotalNumber = newval;
        },
    },
    created() {
        this.dealttotalNumber = this.dealttotal;
    },
    mounted() {
        this.getWaitNumclick();
    },
    methods: {
        gotails() {
            this.$router.push({ path: "/reminder/index" });
        },
        remindshow(gettNum, dealttotal, taskTotal, agencytotal) {
            if (
                gettNum == 0 &&
                dealttotal == 0 &&
                taskTotal == 0 &&
                agencytotal == 0
            ) {
                this.$emit("dowingshow");
            }
        },
        close() {
            this.$store.commit("user/updatecount");
        },
        // totalclick() {
        //     getAction("/flowable/task/listTodo", this.listQuery, false)
        //         .then((res) => {
        //             const { data } = res;
        //             this.dealttotal = data.total;
        //             this.remindshow(this.gettNum,this.dealttotal)
        //         })
        //         .catch((error) => {});
        // },
        async getWaitNumclick() {
            let res = await getWaitNum({}, false);
            this.gettNum = res.data.alarmTotal;
            this.taskTotal = res.data.taskTotal;
            let data = await getAction(
                "/flowable/processInstance/listMyInvolved",
                {
                    startedByMe: false,
                    ccToMe: true,
                    unfinished: false,
                    finished: false,
                }
            );
            this.agencytotal = data.data.total;
            this.remindshow(
                this.gettNum,
                this.dealttotalNumber,
                this.taskTotal,
                this.agencytotal
            );
        },
    },
};
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.clearfix {
    position: relative;
    /* background-color: rgb(245,255,250) */
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

.box-card {
    width: 400px;
    /* height: 150px; */
    position: fixed;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.upload_name {
    width: 200px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
}
.header_background {
    /* background-color: #fffae6; */
    color: #2e405e;
    font-size: 14px;
    line-height: 20px;
    /* margin-bottom: 15px; */
    /* padding-left: 20px;p */
    padding: 10px;
    margin-left: 10px;

    /* text-align: center; */
}
.header_top {
    width: 100%;
    /* text-align: end; */
    /* height: 40px; */
    cursor: pointer;
    /* margin-bottom: 10px; */
    padding: 10px;
    display: flex;
    justify-content: end;
}
.task-header-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    border-top: 5px solid transparent;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    pointer-events: none;
    /* border-color: rgb(44, 126, 248); */
    border-color: red;
}
.task-header-border {
    padding-left: 10px;
    padding-top: 5px;
}
.gotatlils {
    cursor: pointer;
}
.task-header-border_span {
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
}
</style>
